<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from '../Charts/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null,
      corlorList:['0,136,212','137, 189, 27','219, 50, 51','0,245,255','174,238,238','150,205,205','255,218,185','230,230,250','123,104,238','0,255,255'],
      dataList:[
        {
          name:111,
          data:[80, 82, 91, 34, 50,60, 70, 85, 45, 92, 65, 62]
        },
        {
          name:222,
          data:[90, 80, 75, 85, 92, 65, 72, 80, 82, 91, 74, 80]
        },
        {
          name:333,
          data:[85.3, 82, 85, 75, 82, 91, 64, 80, 90, 80, 65, 82]
        },
        {
          name:444,
          data:[88.3, 87, 65, 95, 72, 95, 74, 83, 91, 70, 75, 72]
        },
        {
          name:555,
          data:[69.3, 62, 75, 65, 87, 81, 74, 60, 83, 84, 76, 77]
        },
        {
          name:666,
          data:[75.3, 84, 82, 90, 88, 71, 84, 86, 70, 84, 85, 82]
        }
      ],
      //时间数据列表，元素为时间(date)
      dateList:['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption((()=>{
        let optionObj = {
        backgroundColor: '#394056',
        title: {
          top: 10,
          text: '出勤率统计',
          x: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: '#F1F1F3'
          },
        },
        tooltip: {
          trigger: 'axis',
          formatter:function(params)
          {
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
                  relVal += '<br/>'+ params[i].marker + params[i].seriesName + ' : ' + params[i].value+"%";
              }
            return relVal;
          },
          axisPointer: {
            type:'line',
            lineStyle: {
              color: '#57617B'
            }            
          }
        },
        legend: {
          top: 30,
          type: 'scroll',
          pageIconColor:'rgb(24,144,255)',
          pageIconInactiveColor:'#2f4554',
          icon: 'circle',
          itemWidth: 14,
          itemHeight: 10,
          itemGap: 10,
          right: '4%',
          textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
          }
        },
        grid: {
          top: 100,
          left: '2%',
          right: '2%',
          bottom: '20%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          data: this.dateList
        }],
        yAxis: [{
          type: 'value',
          name: '出勤率',
          nameTextStyle:{
            fontStyle : 'normal',
            fontSize: 16,
            color:'#FFF'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 12
            },
            formatter:function(params)
            { 
              return params+'%';
            },
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        series: []
        }

        const dataList = this.dataList;
        for (const key in dataList) {
          if (Object.hasOwnProperty.call(dataList, key)) {
            optionObj.series.push({
            name: dataList[key].name,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 1,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: `rgba(${this.corlorList[key]}, 0.3)`
                }, {
                  offset: 0.8,
                  color: `rgba(${this.corlorList[key]}, 0)`
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: `rgba(${this.corlorList[key]})`,
                borderColor: `rgba(${this.corlorList[key]}, 0.2)`,
                borderWidth: 12
              }
            },
            data: dataList[key].data
          })
          }
        }
        //需要返回一个对象
        return optionObj;
      })())
    
    }

  }
}
</script>
